<!DOCTYPE html>
  <html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta charset="UTF-8">
    <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="//cdn.bootcss.com/materialize/0.98.0/css/materialize.min.css">
	<link rel="shortcut icon" href="/favicon.ico" /> 
	  
	<title>誓言记dovows,那时吹过的牛逼</title>
    </head>

    <body >
	
		<div class="navbar-fixed">
			<nav>
				<div class="nav-wrapper">
				  <a href="http://sinianta.com" class="brand-logo left">誓言记</a>
				  <ul id="nav-mobile" class=" right ">
					
					<li><a href="regist.html">注册</a></li>
					<li><a href="my.html">我的</a></li>
					
				  </ul>
				</div>
			  </nav>
		  </div>
		  
		
		<div id="vue-app" class="container">
		
			<div class="row" v-for="item in items">
				<div class="col s12 m6">
				  <div class="card">
					<div class="card-image">
					  <img src="images/sample-1.jpg">
					  <span class="card-title" v-text="item.title"></span>
					</div>
					<div class="card-content">
					  <p v-text="item.content"></p>
					</div>
				  </div>
				</div>
			</div>
			
			
			
		  <!-- Modal Structure -->
		  <div id="modal-1" class="modal modal-fixed-footer">
			<div class="modal-content">
			
			 <div class="row">
				<form id="form-vow" class="col s12">
				  <div class="row">
					<div class="input-field col s6">
					  <input id="input_text" name="title" type="text" length="12">
					  <label for="input_text">写下你的誓言</label>
					</div>
				  </div>
				  <div class="row">
					<div class="input-field col s12">
					  <textarea id="textarea1" name="content" class="materialize-textarea" length="120"></textarea>
					  <label for="textarea1">详细信息</label>
					</div>
				  </div>
				</form>
			  </div>
			  
			</div>
			<div class="modal-footer">
			  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat " v-on:click="commitVows">是，I can</a>
			</div>
		  </div>
            
	  </div>

	  <footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">页脚内容</h5>
                <p class="grey-text text-lighten-4">你可以用行和列来组织你的页脚内容。</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">链接</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">链接 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">链接 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="edithtml.html">链接 3</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">链接 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            © 2014 Copyright 文本
            <a class="grey-text text-lighten-4 right" href="#!">更多链接</a>
            </div>
          </div>
        </footer>	
	  
	  
	  <div class="fixed-action-btn">
	  <!-- Modal Trigger -->
		  <a class="btn-floating btn-large waves-effect waves-light red scrollspy" data-target="modal-1"><i class="material-icons">add</i></a>
	  </div>
	  
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <!-- Compiled and minified JavaScript -->
      <script src="//cdn.bootcss.com/materialize/0.98.0/js/materialize.min.js"></script>
	  
	  <script src="//cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
	  
	  <script type="text/javascript">
		$(document).ready(function(){
			//加号固定
			$('.scrollspy').scrollSpy();
			
			// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
			$('.modal').modal();
			
			getVows();
			
		});
		
		function getVows(){
			var params = "t=vow";
			params += "&f=id,title,content,userId,userName,createTime";
			params += "&q=isLive=1";
			$.ajax({
				  url: "/api/base/l",
				  method: "POST",
				  data: params,
				  dataType: "json",
				  success: function(msg){
					  app.items = msg.data.reverse();
				  }
			});
		}
		
		var app = new Vue({
		  el: '#vue-app',
		  data: {
			items:[]
		  },
		  methods: {
			commitVows: function (event) {
			  var params = $("#form-vow").serialize();
			  params += "&t=vow";
			  params += "&isLive=1";
			  $.ajax({
				  url: "/api/base/s$",
				  method: "POST",
				  data: params,
				  dataType: "json",
				  success: function(msg){
					  Materialize.toast('你已发出誓言，记得完成目标哦', 4000); // 4000 is the duration of the toast
					  getVows();
				  }
				
			  });
			}
		  }
  
		})
		
	  </script>
    </body>
  </html>
        